<template>
    <nut-navbar title="浏览历史" @click-right="right" :fixed="true">
        <template #right>
            <HorizontalN class="right" width="16px" @click="showTop = true"></HorizontalN>
        </template>
        <template #left>
            <RectLeft class="left" width="16px" @click="toPreviousPageView"></RectLeft>
        </template>
    </nut-navbar>
    <nut-popup position="top" closeable :style="{ height: '20%' }" teleport-disable v-model:visible="showTop">
        <van-col offset="2">
            <div class="font">快捷入口</div>
        </van-col>
        <nut-row type="flex" justify="space-evenly" class="popup">
            <nut-col :span="4" align="center" @click="toFirstPageView">
                <IconFont name="home" size="30"></IconFont>
                <div>首页</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toGoodsType">
                <IconFont name="category" size="30"></IconFont>
                <div>分类</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toPublishView">
                <IconFont name="share-n" size="30"></IconFont>
                <div>发布闲置</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toMessageView">
                <IconFont name="message" size="30"></IconFont>
                <div>消息</div>
            </nut-col>
            <nut-col :span="4" align="center" @click="toPersonalView">
                <IconFont name="people" size="30"></IconFont>
                <div>个人主页</div>
            </nut-col>
        </nut-row>
    </nut-popup>
    <van-row v-for="historyList in historyLists">
        <van-col span="24">
            <van-swipe-cell class="swipe_cell">
                <van-card :price="historyList.price" :desc="historyList.production" :title="historyList.goodsName"
                    :thumb="getImageUrl(historyList.image)" @click="toGoodsView(historyList.goodsId)"
                    style="font-size: 15px;" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="showConfirmDialog({
                        message: '确认删除吗？',
                    })
                        .then(() => {
                            // on confirm
                            delHistory(historyList.goodsId);
                        })
                        .catch(() => {
                            // on cancel
                        });" />
                </template>
            </van-swipe-cell>
        </van-col>
    </van-row>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { default as http, getImageUrl } from '@/utils/request.js';
import { HorizontalN, RectLeft } from '@nutui/icons-vue';
import { useRoute, useRouter } from 'vue-router'; //路由器
import { showConfirmDialog } from 'vant';
// import http from '@/utils/request.js';
const route = useRoute();
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
//显示弹出层
const showTop = ref(false);
//显示更多
const right = () => {
    console.log('更多');
}
const historyLists = reactive([]);
//查询历史浏览记录
const getHistoryLists = function () {
    http.get("/user/info").then((response) => {
    console.log("获取个人信息= ", response);
    // userInfo.userName = response.data.data.userName;data.data.id
    http.get('/user/history/' + response.data.data.id).then((res) => {
        console.log('获取到的历史浏览记录：', res.data.data.id);
        historyLists.splice(0);//todo 需要将原有的元素清空
        res.data.data.forEach(his => {
            historyLists.push(his);
        });
        console.log('获取到的历史浏览记录：', historyLists);
    })
    console.log("========用户id:",userInfo.id);
  });
}
//删除历史记录
const delHistory = function (goodsId) {
    http.delete('/user/history/' + goodsId).then((res) => {
        console.log('要删除的信息：', res.data);
    })
}
onMounted(() => {
    getHistoryLists();
    delHistory();
})
//跳转到商品页面
const toGoodsView = function (goodsId) {
    console.log("商品ID:", goodsId);
    router.push({ path: "/goodsbuy/" + goodsId });
}
//跳转到首页
function toFirstPageView() {
    router.push("/");
}
//跳转到商品分类页面
function toGoodsType() {
    router.push("/goodstype");
}
//跳转到发布闲置页面
function toPublishView() {
    router.push("/fabuxianzhi");
}
//跳转到消息页面
function toMessageView() {
    router.push("/messagelist");
}
//跳转到个人页面
function toPersonalView() {
    router.push("/personal");
}
//退回到上一个页面
function toPreviousPageView() {
    router.push("/personal");
}
</script>
<style>
.font {
    position: relative;
    top: 20px;
}

.popup {
    position: relative;
    top: 50px;
}

.swipe_cell {
    margin: 0 -20px;
}

.delete-button {
    height: 100%;
}

:root {
    --nut-navbar-padding: 0 -20px;
}

:root:root {
    --van-card-thumb-size: 120px;
    --van-card-background: white;
    --van-card-price-color: red;
}
</style>
